import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Layout, Modal, Icon, Tooltip, message } from 'antd';
import { DEFAULT_PAGE_SIZE, DEFAULT_VALID_STATE, CONST_MODE_CALENDAR, CONST_MODE_LIST } from '@/constants';
import { CONST_PERMISSION_CODE_SHIFTARRANGE_ADD, CONST_PERMISSION_CODE_SHIFTARRANGE_UPD, CONST_PERMISSION_CODE_SHIFTARRANGE_DEL, CONST_PERMISSION_CODE_SHIFTARRANGE_UPLOAD } from '@/constants';
import styles from './index.less';

import Arrange from './Item/Arrange';
import Calendar from './Item/Calendar';
import HandleFile from './Common/HandleFile';
import UnitDepartment from '../../Organization/Common/UnitDepartment';

const { Sider, Content } = Layout;

class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.modularName = 'dutyShift';
    const { global } = props;
    const { currentUnit = {} } = global;
    this.state = {
      currentUnitName: currentUnit.unit_name || '',
      query: {
        state: DEFAULT_VALID_STATE,
        unit_id: {
          id: currentUnit.id || -1
        }
      },
      units: [],
      active: CONST_MODE_CALENDAR
    }
  }

  componentDidMount() {
    this.props.dispatch({
      type: `unit/queryData`,
      payload: {
        state: DEFAULT_VALID_STATE,
        current: 1,
        pageSize: 10000,
        callback: (data) => {
          this.setState({ units: data })
        }
      }
    });
    // this.queryData(1, DEFAULT_PAGE_SIZE);
  }

  componentWillUnmount() {
    this.props.dispatch({ type: `${this.modularName}/clear` });
  }

  // queryData = (current, pageSize) => {
  //   const { query = {} } = this.state;

  //   this.props.dispatch({
  //     type: `${this.modularName}/queryData`,
  //     payload: {
  //       ...query,
  //       current,
  //       pageSize
  //     }
  //   });
  // }

  onTreeSelect = (id, name, type) => {
    if (type === 'unit') {
      const { query = {} } = this.state;
      const { modular } = this.props;
      const { pageSize = DEFAULT_PAGE_SIZE } = modular;

      this.setState({ currentUnitName: name || '', query: { ...query, unit_id: { id: id || -1 } } }, () => {
        // this.queryData(1, pageSize);
      });
    }
  }

  onSelect = (data, time, init) => {
    const { query = {} } = this.state;
    const { unit_id = {} } = query;
    
    if (init) {
      this.props.dispatch({
        type: `${this.modularName}/changeState`,
        payload: { selectedTime: time }
      });
    } else {
      if (unit_id && unit_id.id && unit_id.id !== -1) {
        this.props.dispatch({
          type: `${this.modularName}/changeState`,
          payload: { visible: '排班管理', selectedData: { ...data }, selectedTime: time }
        });
      } else {
        message.error('请选择要排班的单位', 2);
      }
    }
  }

  iconClick = (value) => {
    if (value === 'import') {
      this.props.dispatch({
        type: `${this.modularName}/changeState`,
        payload: {
          visible: '导入排班'
        }
      });
    } else if (value === 'export') {
      this.props.dispatch({
        type: `${this.modularName}/changeState`,
        payload: {
          visible: '导出排班'
        }
      });
    } else {
      this.setState({ active: value });
    }
  }

  render() {
    const { currentUnitName, query = {}, selectedRows = [], units = [], active } = this.state;
    const { dispatch, form, loading, global, modular } = this.props;
    const { isAdmin, userPermissions = [] } = global;
    const { visible, selectedTime, selectedData, refreshTime } = modular;
    const allowEdit = /*global.currentUnit && global.currentUnit.id === query.unit_id.id &&*/
      Array.isArray(userPermissions) && userPermissions.includes(CONST_PERMISSION_CODE_SHIFTARRANGE_ADD) && userPermissions.includes(CONST_PERMISSION_CODE_SHIFTARRANGE_UPD) && userPermissions.includes(CONST_PERMISSION_CODE_SHIFTARRANGE_DEL);

    return (
      <Layout className={styles.basic_layout_wrapper}>
        {isAdmin &&
          <Sider
            className={styles.sider_wrapper}
            style={{
              overflow: 'hidden',
              position: 'fixed',
              // left: 24,
            }}
            width={256}
          >
            <div>
              <UnitDepartment hasChild={false} loading={!!loading.effects[`unit/queryData`]} units={units} currentId={query.unit_id.id} onTreeSelect={this.onTreeSelect} />
            </div>
          </Sider>
        }
        <Layout style={{ marginLeft: isAdmin ? 256 : 0 }}>
          <div className={styles.title}>
            <span>当前单位: </span><span style={{ color: 'rgb(27, 139, 236)' }}>{currentUnitName}</span>
            <Tooltip placement='top' title='列表模式'>
              <Icon className={[styles.icon, active === CONST_MODE_LIST ? styles.active : null].join(' ')} type='table' style={{ marginRight: 80 }} onClick={this.iconClick.bind(this, CONST_MODE_LIST)} />
            </Tooltip>
            <Tooltip placement='top' title='日历模式'>
              <Icon className={[styles.icon, active === CONST_MODE_CALENDAR ? styles.active : null].join(' ')} type='calendar' onClick={this.iconClick.bind(this, CONST_MODE_CALENDAR)} />
            </Tooltip>
          </div>
          <Content className={styles.conditions_wrapper} style={{ margin: 0 }}>
            <Calendar dispatch={dispatch} loading={loading} modularName={this.modularName} active={active} currentUnit={{ id: query.unit_id.id, unit_name: currentUnitName }} refreshTime={refreshTime} onSelect={this.onSelect} />
          </Content>
          <Tooltip placement='top' title='导出排班'>
            <Icon className={styles.affix_icon} type='vertical-align-top' style={{ bottom: 160 }} onClick={this.iconClick.bind(this, 'export')} />
          </Tooltip>
          {Array.isArray(userPermissions) && userPermissions.includes(CONST_PERMISSION_CODE_SHIFTARRANGE_UPLOAD) &&
            <Tooltip placement='top' title='导入排班'>
              <Icon className={styles.affix_icon} type='vertical-align-bottom' style={{ bottom: 100 }} onClick={this.iconClick.bind(this, 'import')} />
            </Tooltip>
          }
        </Layout>
        <Modal
          centered
          destroyOnClose
          maskClosable={false}
          title={visible}
          visible={!!visible}
          wrapClassName={styles.common_modal_wrapper}
          width={1024}
          footer={null}
          onCancel={() => {
            dispatch({ type: `${this.modularName}/changeState`, payload: { visible: false, selectedData: {}/*, selectedTime: undefined*/ } })
          }}
        >
          {visible === '导入排班' || visible === '导出排班' ?
            <HandleFile dispatch={dispatch} form={form} loading={loading} modularName={this.modularName} isAdmin={isAdmin} currentUnit={{ id: query.unit_id.id, unit_name: currentUnitName }} units={isAdmin ? units : units.filter(u => u.id === query.unit_id.id)} selectedTime={selectedTime} active={visible === '导入排班' ? '1' : '2'} /> :
            <Arrange
              dispatch={dispatch}
              loading={loading}
              modularName={this.modularName}
              allowEdit={allowEdit}
              currentUnit={{ id: query.unit_id.id, unit_name: currentUnitName }}
              selectedData={selectedData}
              selectedTime={selectedTime}
            />
          }
        </Modal>
      </Layout>
    );
  }
}

export default connect(({ loading, global, dutyShift }) => ({ loading, global, modular: dutyShift }))(Form.create()(Index));